<template>
    <div class="container zw-img-bg">
        <div
            :class="['company', item.status === 2 && 'disabled']"
            v-for="(item, index) in tenants"
            :key="'tenant' + index"
            @click="changeHandler(item)">
            <div class="company-title">
                <span class="company-title_name">{{ item.tenantName }}</span>
                <div class="company-sub">
                    <span class="company-sub_shop">{{ item.merchantName }}</span>
                </div>
            </div>
            <div class="company-status">
                <div class="company-status_item">
                    <span class="company-status_item_label">企业认证状态：</span>
                    <span
                        :class="[
                            'company-status_item_value',
                            item.identStatus === 2 && 'company-status_item_authed',
                            item.identStatus === 3 && 'company-status_item_auth',
                            item.identStatus === 4 && 'company-status_item_authfail'
                        ]">
                        {{ transformStream(item.identStatus, 'SHOP_AUTH_STATUS') }}
                    </span>
                </div>
                <template v-if="item.status === 4">
                    <div class="yibohui_btn">
                        <el-button type="primary" @click.stop="onEdit(item.tenantId)"> 重新填写 </el-button>
                    </div>
                    <div class="yibohui_desc">
                        <el-tooltip effect="dark" placement="top">
                            <template #content>
                                <div style="max-width: 400px">{{ item.statusRejectReason }}</div>
                            </template>
                            <span>{{ item.statusRejectReason }}</span>
                        </el-tooltip>
                    </div>
                </template>
                <div class="company-status_item">
                    <span class="company-status_item_label">商城状态：</span>
                    <span
                        :class="[
                            'company-status_item_value',
                            item.status === 1 && 'company-status_item_authed',
                            item.status === 3 && 'company-status_item_auth',
                            item.status === 4 && 'company-status_item_authfail'
                        ]">
                        {{ transformStream(item.status, 'SHOP_OPEN_STATUS') }}
                    </span>
                </div>
            </div>
        </div>
        <div class="company company-add" @click="addHandler">
            <el-icon :size="20">
                <CirclePlus />
            </el-icon>
            <span>新建企业商户</span>
        </div>
        <AuthDia v-model="state.authShow" />
    </div>
</template>
<script setup>
import AuthDia from './authDia.vue';
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import storage from '@/commons/storage';
import store from '@/store';
import request from '@/request';
import { isNotEmpty } from '../../../../commons/utils';
import { ElMessage, rowContextKey } from 'element-plus';

const useAuth = store.useAuthStore();
const router = useRouter();
const tenants = reactive([]);
const state = reactive({
    allScccuss: false,
    authShow: false
});

/**
 * 查询企业列表
 */
const queryHandler = async () => {
    const res = await request('queryTenantListServ');
    const tenantList = isNotEmpty(res.data) ? res.data : [];
    tenants.push(...tenantList);
    state.allScccuss = tenantList.every(item => item.identStatus === 2);
};

/**
 * 选择企业
 * @param {*} tenant
 */
const changeHandler = async tenant => {
    if (tenant.status === 4) {
        ElMessage.error('商城开通失败，请重新填写资料后再次提交');
        return;
    }
    if (tenant.status === 3) {
        state.authShow = true;
        return;
    }
    if (tenant.status === 2) {
        ElMessage({
            type: 'error',
            message: '商城已关闭，请联系平台进行申诉或申请'
        });
        return;
    }
    storage.set('ZW-TENANT-ID', tenant.tenantId);
    useAuth.tenant = tenant;
    await request('queryNavServ');
    router.push('/home');
};

/**
 * 新建企业商户
 */
const addHandler = () => {
    if (!state.allScccuss) {
        ElMessage.error('当前存在未完成认证的商户，请先认证商户');
        return;
    }
    router.push({ path: '/company/add' });
};
const onEdit = id => {
    router.push({ path: '/company/add', query: { id: id } });
};
queryHandler();
</script>
<style lang="scss" src="./style.scss" scoped></style>
